<template>
  <div>
   <h1>Roles</h1>
   <el-tree :data="data"
   :props="defaultProps"
   @node-click="handleNodeClick">
   </el-tree>
  </div>
</template>

<script>
import {rolesGet} from '@/http/request.js'
export default {
 name:'RolesView',
 created(){
   rolesGet('roles')
   .then((res)=>{
       let { meta,data } = res.data;
              if (meta.status == 200) {
                data.forEach(r=>{
                  r.authName=r.roleName
                })
                this.data=data
              }else{
                this.$message.error(meta.status)
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
 },
 data(){
   return {
     data:[],
     defaultProps:{
       children:'children',
       label:function(data){
         return data.authName?data.authName:data.roleName
       }
      // label:'authName'
     }
   }
 },
 methods:{
   handleNodeClick(data){
     console.log(data);
   },
  
 }
}
</script>

<style>

</style>